<template>
    <div class="audio-file-details">
        <!-- 有音频信息时显示详情 -->
        <template v-if="fileInfo?.audio_info">
            <!-- 音频封面 -->
            <div v-if="fileInfo.audio_info.cover" class="audio-cover">
                <img :src="fileInfo.audio_info.cover.url" :alt="fileInfo?.name">
            </div>

            <el-descriptions :column="1" border>
                <el-descriptions-item label="音频信息">
                    <div class="audio-details">
                        <!-- 元数据信息 -->
                        <div v-if="fileInfo.audio_info.metadata" class="metadata-section">
                            <el-row :gutter="20">
                                <el-col :span="8" v-if="fileInfo.audio_info.metadata.title">
                                    <div class="detail-item">
                                        <div class="label">标题</div>
                                        <div class="value">{{ fileInfo.audio_info.metadata.title }}</div>
                                    </div>
                                </el-col>
                                <el-col :span="8" v-if="fileInfo.audio_info.metadata.artist">
                                    <div class="detail-item">
                                        <div class="label">艺术家</div>
                                        <div class="value">{{ fileInfo.audio_info.metadata.artist }}</div>
                                    </div>
                                </el-col>
                                <el-col :span="8" v-if="fileInfo.audio_info.metadata.album">
                                    <div class="detail-item">
                                        <div class="label">专辑</div>
                                        <div class="value">{{ fileInfo.audio_info.metadata.album }}</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>

                        <!-- 基本信息 -->
                        <el-divider content-position="left">基本信息</el-divider>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <div class="detail-item">
                                    <div class="label">时长</div>
                                    <div class="value">{{ fileInfo.audio_info.duration_format }}</div>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="detail-item">
                                    <div class="label">格式</div>
                                    <div class="value">{{ fileInfo.audio_info.format_long_name }}</div>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="detail-item">
                                    <div class="label">比特率</div>
                                    <div class="value">{{ formatBitrate(fileInfo.audio_info.bitrate) }}</div>
                                </div>
                            </el-col>
                        </el-row>

                        <!-- 音频流信息 -->
                        <el-divider content-position="left">音频流信息</el-divider>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <div class="detail-item">
                                    <div class="label">编码</div>
                                    <div class="value">{{ fileInfo.audio_info.audio.codec_long_name }}</div>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="detail-item">
                                    <div class="label">声道</div>
                                    <div class="value">{{ fileInfo.audio_info.audio.channel_layout }}</div>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="detail-item">
                                    <div class="label">采样率</div>
                                    <div class="value">{{ fileInfo.audio_info.audio.sample_rate }} Hz</div>
                                </div>
                            </el-col>
                        </el-row>

                        <!-- 波形图 -->
                        <template v-if="fileInfo.audio_info.waveform">
                            <el-divider content-position="left">波形图</el-divider>
                            <div class="waveform">
                                <img :src="fileInfo.audio_info.waveform.url" alt="音频波形">
                            </div>
                        </template>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </template>

        <!-- 没有音频信息时显示提示 -->
        <template v-else>
            <el-alert title="音频信息未获取" type="info" description="您可以通过音频处理功能获取音频信息，详情请参考文档" show-icon>
                <template #default>
                    <el-link href="https://help.aliyun.com/zh/imm/developer-reference/user-guide-for-x-oss-process"
                        type="primary" target="_blank">
                        查看文档
                    </el-link>
                </template>
            </el-alert>
        </template>

        <BaseFileDetails :file-info="fileInfo" />
    </div>
</template>

<script lang="ts" setup>
import BaseFileDetails from './BaseFileDetails.vue'
import type { FileInfo } from '../../types'

defineProps<{
    fileInfo: FileInfo | null
}>()

const formatBitrate = (bitrate: number) => {
    if (bitrate > 1000000) {
        return `${(bitrate / 1000000).toFixed(2)} Mbps`
    }
    return `${(bitrate / 1000).toFixed(2)} Kbps`
}
</script>

<style scoped lang="scss">
.audio-cover {
    margin: 20px 0;
    text-align: center;

    img {
        max-width: 200px;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
}

.audio-details {
    .metadata-section {
        margin-bottom: 16px;
    }

    .el-divider {
        margin: 16px 0;

        :deep(.el-divider__text) {
            font-size: 13px;
            color: #909399;
        }
    }

    .detail-item {
        height: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 8px;
        background-color: #f5f7fa;
        border-radius: 4px;

        .label {
            color: #909399;
            font-size: 12px;
            margin-bottom: 4px;
            flex-shrink: 0;
        }

        .value {
            color: #303133;
            font-size: 14px;
            font-weight: 500;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            word-break: break-all;
            line-height: 1.4;
        }
    }

    .waveform {
        margin-top: 16px;
        text-align: center;

        img {
            max-width: 100%;
            border-radius: 4px;
            background-color: #fff;
        }
    }
}

:deep(.el-descriptions__cell) {
  &.el-descriptions__label {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
  }
}
</style>